<link  href="__PLU__/bootstrap-validator/bootstrapValidator.min.css" rel="stylesheet">
<link  href="__PLU__/magic-check/css/magic-check.min.css" rel="stylesheet">
<link  href="__PLU__/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
<script src="__PLU__/bootstrap-validator/bootstrapValidator.min.js"></script>
<script src="__PLU__/bootstrap-select/bootstrap-select.min.js"></script>
<script src="__PLU__/bootbox/bootbox.min.js"></script>
<div class="modal fade" id="groups-modal" role="dialog" tabindex="-1" aria-labelledby="groups-modal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--Modal header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><i class="pci-cross pci-circle"></i></button>
                <h4 class="modal-title">添加用户组</h4>
            </div>
            <!--Modal body-->
            <div class="modal-body">
                <form id="groups-form" class="form-horizontal" action="{:url('admin/groups/save_group')}" method="post">
                    <div class="tab-content">
                        <div class="form-group">
                            <label class="col-lg-3 control-label" for="group-name">组名</label>
                            <div class="col-lg-7">
                                <input type="text" class="form-control" id="group-name" name="group[name]">
                                <input type="hidden" id="group-id" name="group[id]" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">组类型</label>
                            <div class="col-lg-7">
                                <div class="radio">
                                    <input id="group-type-true" class="magic-radio" type="radio" name="group[type]" checked="checked" value="admin">
                                    <label for="group-type-true">系统管理员</label>
                                    <input id="group-type-false" class="magic-radio" type="radio" name="group[type]" value="member">
                                    <label for="group-type-false">前台用户</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">是否启用</label>
                            <div class="col-lg-7">
                                <div class="radio">
                                    <input id="group-use-true" class="magic-radio" type="radio" name="group[is_use]" checked="checked" value="true">
                                    <label for="group-use-true">是</label>
                                    <input id="group-use-false" class="magic-radio" type="radio" name="group[is_use]" value="false">
                                    <label for="group-use-false">否</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" id="auth-form-group">
                            <label class="col-lg-3 control-label">权限</label>
                            <div class="col-lg-7">
                                <table class="table table-striped">
                                    <tbody id="auth-tbody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <!--Modal footer-->
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                <button class="btn btn-primary" form="groups-form" type="button">保存</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    $('#groups-form').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon',
            invalid: 'glyphicon',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            'group[name]': {
                validators: {
                    notEmpty: {
                        message: '请输入组名'
                    }
                }
            },
            'group[id]': {},
        }
    });
});
$('input[name="group[type]"]').on('click',function(){
    if($(this).val() == 'admin'){
        $('#auth-form-group').css('display','');
    }else{
        $('#auth-form-group').css('display','none');
    }
});
$('button[form="groups-form"]').on('click',function(){
    $('#groups-form').data('bootstrapValidator').validate();  
    if(!$('#groups-form').data('bootstrapValidator').isValid()){  
        return false;
    }
    $.ajax({
        url:"{:url('admin/groups/save_group')}",
        type:"post",
        data:$('#groups-form').serialize(),
        dataType:"json",
        success:function(result){
            if(result.status == 'success'){
                $('#groups-modal').modal('hide');
                $.niftyNoty({
                    type: 'success',
                    icon : 'pli-exclamation icon-2x',
                    message : result.msg,
                    container : 'floating',
                    timer : 1500,
                });
                setTimeout(function(){
                    window.location.reload();
                },1500);
            }else{
                $.niftyNoty({
                    type: 'warning',
                    icon : 'pli-exclamation icon-2x',
                    message : result.msg,
                    container : 'floating',
                    timer : 1500,
                });
            }
        },
        error:function(){
            $.niftyNoty({
                type: 'danger',
                icon : 'pli-exclamation icon-2x',
                message : '网络连接失败',
                container : 'floating',
                timer : 1500,
            });
        }
    });
});
    $('#groups-modal').on('show.bs.modal', function (e) {
        $.ajax({
            url:"{:url('admin/groups/get_auth')}",
            type:"post",
            data:{},
            dataType:"json",
            success:function(result){
                if(result.status == 'success'){ 
                    var auth = result.data;
                    $('#auth-form-group').css('display','none');
                    $('#auth-tbody').html('');
                    for(var i=0;i<auth.length;i++){
                        var tr = '<tr>';
                            tr = tr +'<td style="padding-top:15px;">'+auth[i].name+'</td>';
                            tr = tr +'<td>';
                            tr = tr +'<div class="checkbox">';
                            tr = tr +'<input id="auth-checkbox-'+auth[i].node_id+'" class="checkbox-all magic-checkbox" name="group[auth][admin]['+auth[i].node_id+'][]" type="checkbox" value="'+auth[i].auth+'">';
                            tr = tr +'<label for="auth-checkbox-'+auth[i].node_id+'">全部</label>';
                            tr = tr +'</div>';
                        var children = auth[i].child;
                            for(var j=0;j<children.length;j++){
                                tr = tr +'<div class="checkbox">';
                                tr = tr +'<input id="auth-checkbox-'+children[j].node_id+'" data-parent="auth-checkbox-'+auth[i].node_id+'" class="checkbox-one magic-checkbox" name="group[auth][admin]['+auth[i].node_id+'][]" type="checkbox" value="'+children[j].auth+'">';
                                tr = tr +'<label for="auth-checkbox-'+children[j].node_id+'">'+children[j].name+'</label>';
                                tr = tr +'</div>';
                            }
                            tr = tr +'</td>';
                            tr = tr +'</tr>';
                        $('#auth-tbody').append($(tr));
                    }
                    $('.checkbox-all').on('click',function(){
                        var name = $(this).attr('name');
                        if( this.checked ){
                            $('input[name="'+name+'"]').each(function(index,item){
                                if(!item.disabled){
                                    item.checked = true;
                                }else{
                                    item.checked = false;
                                }
                            });
                        }else{
                            $('input[name="'+name+'"]').prop("checked",false);
                        }
                    });
                    /*多个复选框*/
                    $('.checkbox-one').on('click',function(){
                        var parentid = $(this).data('parent');
                        var chknum = $('input[data-parent="'+parentid+'"]').size();//选项总个数 
                        var chk = 0; 
                        $('input[data-parent="'+parentid+'"]').each(function () {
                            if(this.checked){
                                chk++; 
                            } 
                        });
                        if(chknum==chk){
                            $('#'+parentid).prop("checked",true);
                        }else{
                            $('#'+parentid).prop("checked",false);
                        }
                    });
                    var groupid = $($(e)[0].relatedTarget).data('groupid');
                    if(groupid == undefined){
                        $('#groups-form').bootstrapValidator('resetForm', true);
                        $('input[name="group[type]"][value="admin"]').prop('checked',true);
                        $('input[name="group[is_use]"][value="true"]').prop('checked',true);
                        $('#auth-form-group').css('display','');
                    }else{
                        $.ajax({
                            url:"{:url('admin/groups/get_group')}",
                            type:"post",
                            data:{"groupid":groupid},
                            dataType:"json",
                            success:function(result){
                                if(result.status == 'success'){ 
                                    var group = result.data;
                                    var auth = group.auth;
                                    $('#group-name').val(group.name);
                                    $('#group-id').val(group.group_id);
                                    $('input[name="group[type]"][value="'+group.type+'"]').prop('checked',true);
                                    $('input[name="group[is_use]"][value="'+group.is_use+'"]').prop('checked',true);
                                    if(group.type == 'admin'){
                                        $('#auth-form-group').css('display','');
                                        for(var i=0;i<auth.length;i++){
                                            $('input[value="'+auth[i]+'"]').prop('checked',true);
                                        }
                                    }else{
                                        $('#auth-form-group').css('display','none');
                                    }
                                    
                                }else{
                                    $.niftyNoty({
                                        type: 'warning',
                                        icon : 'pli-exclamation icon-2x',
                                        message : result.msg,
                                        container : 'floating',
                                        timer : 1500,
                                    });
                                }
                            },
                            error:function(){
                                $.niftyNoty({
                                    type: 'danger',
                                    icon : 'pli-exclamation icon-2x',
                                    message : '网络连接失败',
                                    container : 'floating',
                                    timer : 1500,
                                });
                            }
                        });
                    }
                }else{
                    $.niftyNoty({
                        type: 'warning',
                        icon : 'pli-exclamation icon-2x',
                        message : result.msg,
                        container : 'floating',
                        timer : 1500,
                    });
                }
            },
            error:function(){
                $.niftyNoty({
                    type: 'danger',
                    icon : 'pli-exclamation icon-2x',
                    message : '网络连接失败',
                    container : 'floating',
                    timer : 1500,
                });
            }
        });
        

    });
</script>